<template>
  <div class="StatusDemo">
    <div class="search">
      <el-form :inline="true" style="align-items: center; height: 37px">
        <el-form-item label="设备编号:">
          <el-input
            v-model="queryParams.innerCode"
            clearable
            placeholder="请输入"
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="searchDevice">
            <i class="el-icon-search" />
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <el-table :data="deviceList">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            {{ $index + 1 + (queryParams.pageIndex - 1) * 10 }}
          </template>
        </el-table-column>
        <el-table-column label="设备编号" prop="innerCode" />
        <el-table-column label="设备型号" prop="type.name" />
        <el-table-column label="详细地址" prop="node.name" />
        <el-table-column label="运营状态">
          <template v-slot="{ row }">
            <span>{{ vmStatusYs[row.vmStatus] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备状态" width="250px">
          <template class="cell">
            <span class="vmStatusBtn faildBtn">离线</span>
            <span class="vmStatusBtn successBtn">货道</span>
            <span class="vmStatusBtn successBtn">传动轴</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="deviceStatus">
          <template v-slot="{ row }">
            <el-button
              size="small"
              type="text"
              @click="viewDetail(row.innerCode)"
            >查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row align="middle" justify="end" style="height: 60px" type="flex">
        <el-pagination
          :current-page="queryParams.pageIndex"
          :page-size="queryParams.pageSize"
          layout=" prev, next"
          next-text="下一页"
          prev-text="上一页"
          @current-change="changePage"
        />
      </el-row>
      <!--      设备详情弹窗-->
      <el-dialog
        :visible="dialogVisible"
        title="设备详情"
        @close="dialogVisible = false"
      >
        <div class="dialogBody">
          <el-row class="dialogRow">
            <el-col :span="6">
              <span>销售量：</span>
              <span class="textColor">{{ saleNum }}个</span>
            </el-col>
            <el-col :span="6">
              <span>销售额：</span>
              <span class="textColor">{{ saleMoney / 100 }}元</span>
            </el-col>
            <el-col :span="6">
              <span>补货次数：</span>
              <span class="textColor">{{ replenishNum }}次</span>
            </el-col>
            <el-col :span="6">
              <span>维修次数：</span>
              <span class="textColor">{{ repairNum }}次</span>
            </el-col>
          </el-row>
          <div style="margin: 15px 0">商品销量（月）</div>
          <el-row>
            <el-col
              v-for="(item, i) in saleGoodsList"
              :key="i"
              :span="6"
              class="goodsCol"
            >
              <span>{{ item.skuName }}：{{ item.count }}</span>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getDetailData,
  getDeviceList,
  getRepairData,
  getReplenishData,
  getSaleData,
  getSaleMoneyData,
  vmStatusYs
} from '@/api/status'

export default {
  name: 'StatusDemo',
  data() {
    return {
      // 销售商品列表
      saleGoodsList: [],
      // 维修次数后台返回
      repairNum: 0,
      // 补货次数后台返回
      replenishNum: 0,
      // 销售额后台返回
      saleMoney: 0,
      // 销售量后台返回
      saleNum: 0,
      // 设备详情弹窗的显示和隐藏
      dialogVisible: false,
      // 查询参数
      queryParams: {
        // 存储查询参数
        pageIndex: 1,
        pageSize: 10,
        innerCode: null
      },
      // 设备列表 后台返回
      deviceList: []
    }
  },
  computed: {
    vmStatusYs() {
      return vmStatusYs
    }
  },
  created() {
    this.getDeviceList()
  },
  methods: {
    // 查看详情
    async viewDetail(id) {
      this.dialogVisible = true
      const date = new Date()

      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const startTime = `${year}-${month}-01`
      const endTime = `${year}-${month}-${day}`
      const start = `${year}-${month}-01 00:00:00`
      const end = `${year}-${month}-${day} 23:59:59`
      const res = await getSaleData({
        innerCode: id,
        start: start,
        end: end
      })
      this.saleNum = res
      const res1 = await getSaleMoneyData({
        innerCode: id,
        start: start,
        end: end
      })
      this.saleMoney = res1
      // 获取补货次数数据
      const res2 = await getReplenishData(id, startTime, endTime)
      this.replenishNum = res2
      // 获取维修次数数据
      const res3 = await getRepairData(id, startTime, endTime)
      this.repairNum = res3
      const res4 = await getDetailData(id, startTime, endTime)
      this.saleGoodsList = res4
    },
    // 查询设备
    searchDevice() {
      this.queryParams.pageIndex = 1
      this.getDeviceList()
    },
    async getDeviceList() {
      const res = await getDeviceList(this.queryParams)
      console.log(this.queryParams)
      this.deviceList = res.currentPageRecords
    },
    changePage(page) {
      this.queryParams.pageIndex = page
      this.getDeviceList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  height: 64px;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
  margin-bottom: 20px;
  padding: 0 0 0 17px;
  background-color: #fff;
}

.result {
  padding: 20px 15px 19px 17px;
  background-color: #fff;

  ::v-deep .el-pagination button {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
  }

  ::v-deep .btn-prev:disabled {
    background: #edf0f9;
  }

  ::v-deep .el-pagination button:hover {
    color: #383133;
  }

  .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-right: 10px;

    .vmStatusBtn {
      display: inline-block;
      border-radius: 14px;
      text-align: center;
      color: #fff;
      line-height: 23px;
      height: 23px;
      padding: 0 9px;
      background-color: pink;
      margin: 0 5px;
    }

    .faildBtn {
      background: #ff665f linear-gradient(135deg, #ffb043, #ffc020);
    }

    .successBtn {
      background: #ff665f linear-gradient(135deg, #3fc997, #4bda98);
    }
  }

  .dialogBody {
    margin: 0 auto;

    .dialogRow {
      background: rgb(244, 246, 251);
      height: 54px;
      line-height: 54px;
      text-align: center;

      .textColor {
        color: #5d86fd;
      }
    }

    .goodsCol {
      border: 1px solid #ccc;
      margin-left: -1px;
      margin-top: -1px;
      line-height: 40px;
      height: 40px;
      text-align: center;
    }
  }
}
</style>
